<template>
  <div>
    <el-card class="card">
      <div class="one">
        <span style="margin-right: 10px;">请假</span>
        <span style="margin-right: 20px">|</span>
        <el-switch
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
        <i class="el-icon-setting i" @click="addFile" />
      </div>
      <div class="one" style="margin-left: 25px;">
        <span style="margin-right: 10px;">加班</span>
        <span style="margin-right: 20px">|</span>
        <el-switch
          v-model="value1"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
        <i class="el-icon-setting i" @click="addFile" />
      </div>
      <div class="one" style="margin-left: 25px;">
        <span style="margin-right: 10px;">离职</span>
        <span style="margin-right: 20px">|</span>
        <el-switch
          v-model="value2"
          active-color="#13ce66"
          inactive-color="#ff4949"
        />
        <i class="el-icon-setting i" @click="addFile" />
      </div>
    </el-card>
    <!-- 点击图标弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: true,
      value1: true,
      value2: true,
      dialogVisible: false
    }
  },
  methods: {
    addFile() {
      // console.log(1)
      this.dialogVisible = true
    }
  }

}
</script>

<style lang="scss" scoped>
.card{
  margin-top: 20px;
  color: #666;

div{
  display: inline-block;
  position: relative;
}
.one{
    width: 160px;
    height: 50px;
    border: 1px solid #ccc;
    line-height: 50px;
    padding-left: 20px;
}
.i{
  position: absolute;
  right: 3px;
  top: 3px;
  color: #666;
}
}
</style>
